<template>
	<view class="content">
		<view class="section section-1">
			<view class="section-body">
				<view class="tab">
					<view  @click="setCurIdx(idx, item.id, item.name)" 
					:class="`item ${curIdx === idx ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`" 
					v-for="(item, idx) in tabList" :key="item.id">
						<view class="label">{{item.name}}</view>
						<view class="shape">
							<view class="shape-body"></view>
						</view>
						<view class="shape shape-mirrow">
							<view class="shape-body"></view>
						</view>
					</view>
				</view>
				<view v-if="dataCode">
					<view v-if="curIdx !=2">
						<view class="info" v-for="(item,index) in listData" :key="index">
							<view class="top-title">
								<view class="company">
									{{item.name}}
								</view>
							</view>
							<view class="wrapper" v-for="(item2,index) in item.list" :key="index">
								<view class="title">
									{{item2.position}}
									<view class="add-btn" @click="handleAddShow(item.id, item2.position)">
										+ 添加人员
									</view>
								</view>
								<view class="value">
									<view v-for="(item3,index) in item2.children" :key="index">
										<view class="member">
											<text class="name">
												{{item3.zrr_name}} 
												<text @click="handleCall(item3.zrr_tel)" class="tel">
													<text class="iconfont icon-24gl-phoneLoudspeaker"></text>
													{{item3.zrr_tel}}
												</text>
											</text>
											<view class="evaluate">
												<!-- <view class="rate">
													{{ item3.score}}分
												</view> -->
												<text class="iconfont icon-bianji1" @click="handleEditShow(item3)"></text>
												<text class="iconfont icon-shanchu" @click="delTipShow(item3.id)"></text>
											</view>
										</view>
										<view class="certificate">身份证：{{item3.zrr_identity}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="info-sg">
							<view class="wrapper-sg" v-for="(item,index) in listData2" :key="index">
								<view class="unit">
									<view class="unit-title">
										{{item.name}}
									</view>
									<text class="unit-show" @click="queryFun(item.id)">查看人员<text class="iconfont icon-xiangyou1"></text></text>
								</view>
								<view class="value-sg" v-for="(item2,index) in item.children" :key="index">
									<view class="title-sg" >
										{{item2.type}}									
									</view>
									<view class="member-sg" v-for="(item3,index) in item2.list" :key="index">
										<text class="name-sg">{{item3.name}}</text>
										<view class="evaluate-sg">
											<text @click="queryFun(item3.id)">查看人员<text class="iconfont icon-xiangyou1"></text></text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="tip-error">
					{{this.tipError}}
				</view>
			</view>
		</view>
		<u-modal :show="show" @confirm="confirmSubmit" @cancel="close" :content="modaltip" showCancelButton ref="uModal" ></u-modal>
		<u-popup mode="bottom" :show="showPop" @close="closePop" :round="10">
			<view class="section-pop">
				<view class="title">
					<text>{{ isAdd? '添加': '编辑'}}责任人</text>
				</view>
				<view class="form-item">
					<view class="label">负责人</view>
					<view class="input">
						<u--input placeholderClass="input-placeholder" class="input-body"
							placeholder="请输入负责人" v-model="form.zrr_name"></u--input>
					</view>
				</view>
				<view class="form-item">
					<view class="label">电话</view>
					<view class="input">
						<u--input placeholderClass="input-placeholder" class="input-body"
							type="number" maxlength="11" placeholder="请输入电话" v-model="form.zrr_tel"></u--input>
					</view>
				</view>
				<view class="form-item">
					<view class="label">身份证</view>
					<view class="input">
						<u--input placeholderClass="input-placeholder" class="input-body"
							 maxlength="18" placeholder="请输入身份证" v-model="form.zrr_identity"></u--input>
					</view>
				</view>
				<view class="form-item">
					<view class="label">职位</view>
					<view class="input">
						<input placeholderClass="input-placeholder" class="input-body" disabled="true"
							v-model="form.zrr_position"></input>
					</view>
				</view>
				<view class="custom-button" @click="submit(isAdd)">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
  companyListApi,
  addPersonApi,
  editPersonApi,
  delPersonApi,
} from "@/api/person.js";
import { mapGetters, mapActions } from "vuex";
import IdentityCodeValid from "@/src/utils/checkIdent";
export default {
  data() {
    return {
      isAdd: true,
      showPop: false,
      show: false,
      dataCode: true,
      count: 5,
      value: 1,
      modaltip: "确认删除该人员吗",
      tabList: [
        { id: 1, name: "业主单位" },
        { id: 2, name: "监理单位" },
        { id: 3, name: "施工单位" },
        { id: 4, name: "设计单位" },
      ],
      curIdx: 0,
      curId: 1,
      curName: "业主单位",
      listData: [],
      listData2: [],
      zrrTel: "",
      zrrPosition: "",
      form: {
        link_id: "",
        zrr_position: "",
        zrr_name: "",
        zrr_tel: "",
        zrr_identity: "",
      },
      delId: "",
      editId: "",
      tipError: "",
      project_id: "",
    };
  },
  onLoad(data) {
    this.companyList();
  },
  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },
  methods: {
    queryFun(v) {
      uni.navigateTo({
        url: "/pages/work/manager/project_prev/import/query/query?id=" + v,
      });
    },
    delTipShow(id) {
      this.show = true;
      this.delId = id;
    },
    async confirmSubmit() {
      let j = await delPersonApi({
        id: this.delId,
      });
      if ((j.code = 1)) {
        this.showToast("删除成功");
        this.show = false;
        this.companyList();
      }
    },
    close() {
      this.show = false;
    },
    async submit() {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (IdentityCodeValid(this.form.zrr_identity) == false) {
        uni.showToast({
          title: "请填写正确的身份证号",
          duration: 1000,
          icon: "error",
        });
        return;
      }
	      if (!myreg.test(this.form.zrr_tel)) {
        uni.showToast({
          title: "请填写正确的手机号",
          duration: 1000,
          icon: "error",
        });
        return;
      }
      if (this.form.zrr_name != "" && this.form.zrr_tel != "") {
        if (this.isAdd) {
          let j = await addPersonApi({
            ...this.form,
          });
          if (j.data.code == 1) {
            this.showToast("添加成功");
            this.showPop = false;
            this.companyList();
          }
        } else {
          let j = await editPersonApi({
            ...this.form,
            id: this.editId,
          });
          if (j.data.code == 1) {
            this.showToast("修改成功");
            this.showPop = false;
            this.companyList();
          }
        }
      } else {
        uni.showToast({
          title: "请完善内容！",
          icon: "none",
          duration: 1000,
        });
      }
    },
    showToast(name) {
      uni.showToast({
        title: name,
        icon: "none",
        duration: 1000,
      });
    },
    showModal() {
      this.show = true;
    },
    handleAddShow(id, position) {
      // 清空表单信息
      this.form.zrr_name = "";
      this.form.zrr_tel = "";
      this.form.zrr_identity = "";

      this.showPop = true;
      this.isAdd = true;

      this.form.link_id = id;
      this.form.zrr_position = position;
    },
    handleEditShow(info) {
      // 清空表单信息
      this.form.zrr_name = "";
      this.form.zrr_tel = "";
      this.form.zrr_identity = "";

      this.showPop = true;
      this.isAdd = false;

      this.editId = info.id;
      this.form.zrr_name = info.zrr_name;
      this.form.zrr_tel = info.zrr_tel;
      this.form.zrr_identity = info.zrr_identity;
      this.form.zrr_position = info.zrr_position;
    },
    closePop() {
      this.showPop = false;
    },
    async companyList() {
      let j = await companyListApi({
        project_id: this.curProject.id,
        type: this.curName,
      });
      let result = j.data.data;
      if (j.data.code == 1) {
        this.dataCode = true;
        if (result[0].type == "自有单位") {
          this.listData2 = result;
        } else {
          this.listData = j.data.data[0];
        }
      } else {
        this.dataCode = false;
        this.tipError = "未找到符合条件的单位";
      }
    },
    handleCall(number) {
      uni.makePhoneCall({
        phoneNumber: number,
      });
    },
    setCurIdx(idx, id, name) {
      this.curIdx = idx;
      this.curId = id;
      this.curName = name;
      this.companyList();
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.section-1 {
  width: 100%;
  background-color: #3759f2;
  .section-body {
    width: 100%;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    background-color: #fff;
    overflow: hidden;
    .tab {
      width: 100%;
      height: 80rpx;
      @include clear();
      background-color: #1534ce;
      .item {
        width: 25%;
        float: left;
        height: 80rpx;
        background-color: #1534ce;
        position: relative;
        .label {
          height: 80rpx;
          line-height: 80rpx;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
          text-align: center;
          width: 100%;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffffff;
        }
        .shape {
          z-index: 1;
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          bottom: 0;
          left: -50rpx;
          background: #000;
          display: none;
          background-color: #fff;
          overflow: hidden;
          .shape-body {
            width: 50rpx;
            height: 50rpx;
            background-color: #1534ce;
            border-bottom-right-radius: 40rpx;
          }
        }
        .shape-mirrow {
          z-index: 1;
          left: 0;
          display: none;
          .shape-body {
            border-bottom-right-radius: 0rpx;
            border-bottom-left-radius: 40rpx;
          }
        }
      }
      .item__active {
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        background-color: #fff;
        .label {
          color: #46464a;
        }
        .shape {
          display: block;
        }
        .shape-mirrow {
          display: none;
        }
      }
      .item__active_next {
        border-bottom-right-radius: 50rpx;
        .shape {
          display: none;
        }
        .shape-mirrow {
          display: block;
        }
      }
    }
    .tip-error {
      height: 300rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ccc;
    }
  }
  .info {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 40rpx;
    .top-title {
      width: 100%;
      padding-bottom: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .company {
        text-align: left;
        width: 600rpx;
        font-size: 26rpx;
        line-height: 25rpx;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 2rpx;
        color: #3b3c40;
        margin-right: 30rpx;
      }
    }
    .wrapper {
      width: 100%;
      border-radius: 35rpx;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      box-sizing: border-box;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      padding: 28rpx 40rpx;
      margin-bottom: 24rpx;
      .title {
        width: 100%;
        height: 30rpx;
        line-height: 30rpx;
        border-bottom: solid 3rpx #f2f2f0;
        font-size: 26rpx;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #3b3c40;
        padding-bottom: 28rpx;
        .add-btn {
          float: right;
          text-align: center;
          width: 189rpx;
          height: 40rpx;
          border-radius: 21rpx;
          border: solid 2rpx #1534ce;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 40rpx;
          letter-spacing: 0rpx;
          color: #1534ce;
        }
      }
      .value {
        width: 100%;
        padding-top: 28rpx;
        .member {
          width: 100%;
          height: 40rpx;
          line-height: 40rpx;
          margin-bottom: 15rpx;
          margin-top: 10rpx;
          &:last-child {
            margin-bottom: 0;
          }
          .name {
            font-size: 26rpx;
            color: #3b3c40;
            margin-right: 10rpx;
            .tel {
              margin-left: 10rpx;
              color: #1d3bd0;
              .icon-24gl-phoneLoudspeaker {
                color: #1d3bd0;
                font-size: 26rpx;
                margin-right: 5rpx;
              }
            }
          }
          .evaluate {
            float: right;
            .rate {
              display: inline-block;
              margin-right: 20rpx;
              font-size: 26rpx;
            }
            .evaluate-btn {
              width: 150rpx;
              font-size: 24rpx;
              padding: 2rpx 15rpx;
              border-radius: 20rpx;
              border: 1px solid #1d3bd0;
              color: #1d3bd0;
              font-weight: bold;
            }
          }
          .icon-bianji1 {
            color: #1d3bd0;
            font-size: 28rpx;
            margin-right: 10rpx;
          }
          .icon-shanchu {
            color: red;
            font-size: 28rpx;
          }
        }
        .certificate {
          font-size: 26rpx;
        }
      }
    }
  }

  .info-sg {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 40rpx;
    margin-top: 30rpx;
    .top-title {
      width: 100%;
      margin-top: 12rpx;
      padding-bottom: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .company {
        text-align: left;
        width: 600rpx;
        font-size: 26rpx;
        line-height: 25rpx;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 2rpx;
        color: #3b3c40;
        margin-right: 30rpx;
      }
    }
    .wrapper-sg {
      width: 100%;
      border-radius: 35rpx;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      box-sizing: border-box;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      padding: 28rpx 40rpx;
      margin-bottom: 24rpx;
      .unit {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        font-size: 26rpx;
        border-bottom: solid 3rpx #f2f2f0;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #3b3c40;
        padding-bottom: 20rpx;
        .unit-title {
          flex: 2;
          font-weight: bold;
        }
        .unit-show {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          flex: 1;
          color: #1534ce;
          margin-top: 8rpx;
        }
      }
      .title-sg {
        width: 100%;
        height: 25rpx;
        line-height: 25rpx;
        border-bottom: solid 3rpx #f2f2f0;
        font-size: 26rpx;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #3b3c40;
        padding-bottom: 15rpx;
        font-weight: bold;
        .add-btn {
          float: right;
          text-align: center;
          width: 180rpx;
          height: 32rpx;
          border-radius: 21rpx;
          border: solid 2rpx #1534ce;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30rpx;
          letter-spacing: 0rpx;
          color: #1534ce;
          padding: 2rpx 0;
        }
      }

      .value-sg {
        width: 100%;
        padding-top: 28rpx;
        .member-sg {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          width: 100%;
          height: 50rpx;
          padding-top: 10rpx;
          line-height: 40rpx;
          margin-bottom: 15rpx;
          border-bottom: solid 3rpx #f2f2f0;
          &:last-child {
            margin-bottom: 0;
          }
          .name-sg {
            flex: 2;
            font-size: 26rpx;
            color: #3b3c40;
            margin-right: 13rpx;
            .tel {
              margin-left: 10rpx;
              color: #1d3bd0;
              .icon-24gl-phoneLoudspeaker {
                color: #1d3bd0;
                font-size: 26rpx;
                margin-right: 5rpx;
              }
            }
          }
          .evaluate-sg {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            flex: 1;
            font-size: 26rpx;
            color: #1d3bd0;
          }
          .icon-bianji1 {
            color: #1d3bd0;
            font-size: 28rpx;
            margin-right: 10rpx;
          }
          .icon-shanchu {
            color: red;
            font-size: 28rpx;
          }
        }
        .certificate {
          font-size: 26rpx;
        }
      }
    }
  }
}
.section-pop {
  width: 100%;
  border-radius: 50rpx;
  padding-top: 20rpx;
  padding-bottom: 50rpx;
  .title {
    padding-left: 20rpx;
    padding-bottom: 40rpx;
    font-weight: bold;
  }
}
.form-item {
  width: 750rpx;
  line-height: 48rpx;
  margin: 0 auto;
  margin-bottom: 25rpx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 40rpx;
  &:last-child {
    margin-bottom: 34rpx;
  }

  &.upload-wrap {
    align-items: unset;
    height: unset;
    line-height: unset;
  }

  @include clear();

  .label {
    float: left;
    width: 120rpx;
    height: 48rpx;
    text-align: left;
    line-height: 44rpx;
    font-size: 26rpx;
    color: #46464a;
  }
  .input {
    float: left;
    width: calc(100% - 134rpx - 3rpx - 30rpx);
    border-radius: 20rpx;
    border: solid 2rpx #1534ce;
    .input-body {
      box-sizing: border-box;
      width: 100%;
      height: 44rpx;
      padding: 0 !important;
      border: none;
      padding-left: 30rpx !important;
      padding-right: 30rpx !important;
      font-size: 26rpx;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rpx;
      color: rgba(0, 0, 0, 0.8);
      line-height: 44rpx;
      /deep/ .uni-input-input {
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: rgba(0, 0, 0, 0.8);
      }
    }

    .input-placeholder {
      font-size: 26rpx;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rpx;
      color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
